<template>
  <div class="brand-page">
    <!-- 顶部气泡背景区域 -->
    <section class="banner">
      <a-carousel autoplay :dots="false" :arrows="false" :pauseOnHover="false">
        <div class="banner-item1">
        </div>
        <div class="banner-item2">
        </div>
        <div class="banner-item3"></div>
      </a-carousel>
      <div class="banner-text">
        <div class="banner-container">
          <img src="../assets/images/brand/banner1.png" alt="logo" class="logo">
        <div class="banner-number">01</div>
        <div class="text-container">
          <h2 class="section-title">Revitalize & Renew</h2>
          <p class="section-desc">以自然为原点，以科技为舟楫，探寻健康与活力的边界。 </p>
          <p class="section-desc">萃取千年馈赠凝练成晶，开启关于永恒的对话：重塑生命自愈的能量。</p>
          <div class="more-btn">
            <a href="#about">MORE</a>
          </div>
        </div>
        </div>
        <div class="banner-button">
          <div class="banner-button-item">
            <img src="../assets/images/brand/arrow.png" alt="">
          </div>
          <div class="banner-button-item">
            <img src="../assets/images/brand/arrow.png" alt="">
          </div>
        </div>
      </div>
    </section>

    <!-- 关于我们部分 -->
    <section id="about" class="about-section">
      <div class="about-background">
        <div class="container">
          <div class="about-content">
            <div class="about-text" v-fade-in="'left'">
              <h2 class="about-title">About Us</h2>
              <p class="about-subtitle">who we are?</p>
              <p class="about-desc">
                溯源自然：从高寒冰川到海岸森林，甄选历经了万年演化的珍稀植物  <br />
                对话未来：以生物科技重构自然之力，打造突破时间限制的内核抗衰方案<br />
                永恒艺术：将生命科学之美升华为艺术感官体验，缔造健康与美学的双重仪式<br />
              </p>
              <div class="about-stats">
                <div class="stat-item" v-fade-in="'up'">
                  <h3 style="font-size: 1.4rem; font-weight: 700;">Vitality</h3>
                </div>
                <div class="stat-item number" v-fade-in="'up'" :style="{'transition-delay': '0.2s'}">
                  <h3>Refine</h3>
                  <span>30%</span>
                </div>
                <div class="stat-item number" v-fade-in="'up'" :style="{'transition-delay': '0.4s'}">
                  <h3>Recovery</h3>
                  <span>21%</span>
                </div>
                <div class="stat-item number" v-fade-in="'up'" :style="{'transition-delay': '0.6s'}">
                  <h3>Recuperation</h3>
                  <span>7%</span>
                </div>
              </div>
              <button class="more-btn" v-fade-in="'bottom'">MORE</button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 精选系列部分 -->
    <section class="eclat-section">
      <div class="container">
        <h2 class="eclat-title" v-fade-in="'up'">Eclat Collection</h2>
        <div class="eclat-items">
          <div class="eclat-item">
            <h3 v-fade-in="'up'" :style="{'transition-delay': '0.1s'}">「晶」-耀奢旗舰</h3>
            <p v-fade-in="'down'" :style="{'transition-delay': '0.1s'}">凝萃芬兰野生蓝莓花色苷，激活线粒体能量，<br> 打造晶系列产品矩阵—— <br> 黑晶|紫晶|瑰晶三大产品线</p>
          </div>
          <div class="eclat-item eclat-border">
            <h3  v-fade-in="'up'" :style="{'transition-delay': '0.3s'}">「养」-定向滋养</h3>
            <p  v-fade-in="'down'" :style="{'transition-delay': '0.3s'}">深度优化—机体呵护—机能平衡" 以植萃能量<br>养护肝、胆、巢、颜等，打造<br>养系列产品矩阵—— <br>肝养 | 娇养 | 肽养 三大产品线</p>
          </div>
          <div class="eclat-item" >
            <h3 v-fade-in="'up'" :style="{'transition-delay': '0.5s'}">「源」-纯净本源</h3>
            <p v-fade-in="'down'" :style="{'transition-delay': '0.5s'}">融合跨纬度珍稀植物活性成分，<br> 助力身体自愈平衡，以"原"养"源"，<br> 蕴养身体本源</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 品牌故事部分 -->
    <section class="story-section">
      <div class="container">
        <h2 class="story-title" v-fade-in="'left'"><span class="story-title-span">source</span>Enjoy<br>our story</h2>
        <div class="story-content">
          <div class="story-left">
            <div class="story-globe">
              <div class="story-subtitle" v-fade-in="'right'" :style="{'transition-delay': '0.7s'}">
                <span>沉淀</span> <span>既是经典</span>
              </div>
            </div>
          </div>
          <div class="story-right">
            <p class="story-text story-text-title" v-fade-in="'up'">科学与人文艺术</p>
            <p class="story-text" v-fade-in="'right'" :style="{'transition-delay': '0.1s'}">
              法国国家农业食品与环境研究院，农业、食品和环境领域世界顶尖的研究机构，在原料筛选方面具有丰富的经验和严格的标准，通过科学的方法确保晶养源所选原料的质量和纯度。
            </p>
            <p class="story-text" v-fade-in="'right'" :style="{'transition-delay': '0.3s'}">
              江南大学食品与工程学科已连续6年位居世界第一，近5年承担国家和省部级科研项目计570项（其中国家重点研发计划、国家自然科学基金等国家主体计划项目近170项）。
            </p>
            <p class="story-text story-text-last" v-fade-in="'right'" :style="{'transition-delay': '0.5s'}">
              东南大学营养与公共卫生学院-孙桂菊教授。营养与食品卫生学系主任，教授，博导，中国营养学会理事学系先后承担"十三五"和"十四五"国家重点研发计划等多项国家级、省部级科研项目，在慢性病防治、少儿妇幼健康、精准营养、功能食品评价等领域具有深厚积淀。
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- 服务优势部分 -->
    <section class="advantages-section">
      <div class="container" style="padding: 0;">
        <div class="advantages-content">
          <div class="advantages-image" v-fade-in="'left'">
            <!-- 左侧图片区域 -->
            <img src="../assets/images/brand/p4.png" alt="我们的优势" />
          </div>
          <div class="advantages-grid">
            <div class="advantage-item"  :style="{'transition-delay': '0.1s'}">
              <div class="advantage-icon">
                <svg t="1749354452166" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4245" width="200" height="200"><path d="M810.666667 597.333333v128h128v85.333334h-128v128h-85.333334v-128h-128v-85.333334h128v-128h85.333334z m53.034666-394.368a256 256 0 0 1 10.112 351.36l-60.586666-60.501333c56.746667-65.024 53.76-166.997333-9.941334-230.570667a170.709333 170.709333 0 0 0-234.24-6.528l-56.96 51.114667-57.002666-51.072a170.666667 170.666667 0 0 0-242.602667 239.146667l359.765333 360.362666L512 916.693333 150.186667 554.368a256 256 0 0 1 361.813333-361.130667 255.914667 255.914667 0 0 1 351.658667 9.728z" fill="#000000" p-id="4246"></path></svg>
              </div>
              <h3 class="advantage-title">我们的服务</h3>
              <p class="advantage-desc">改善促进：改善睡眠，优化情绪，促进肌肤弹性，<br> 支持心血管健康，保护肝脏功能。</p>
            </div>
            <div class="advantage-item"  :style="{'transition-delay': '0.3s'}">
              <div class="advantage-icon">
                <svg t="1749354562081" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8202" width="200" height="200"><path d="M395.765333 586.570667h-171.733333c-22.421333 0-37.888-22.442667-29.909333-43.381334L364.768 95.274667A32 32 0 0 1 394.666667 74.666667h287.957333c22.72 0 38.208 23.018667 29.632 44.064l-99.36 243.882666h187.050667c27.509333 0 42.186667 32.426667 24.042666 53.098667l-458.602666 522.56c-22.293333 25.408-63.626667 3.392-54.976-29.28l85.354666-322.421333zM416.714667 138.666667L270.453333 522.581333h166.869334a32 32 0 0 1 30.933333 40.181334l-61.130667 230.954666 322.176-367.114666H565.312c-22.72 0-38.208-23.018667-29.632-44.064l99.36-243.882667H416.714667z" fill="#000000" p-id="8203"></path></svg>
              </div>
              <h3 class="advantage-title">我们的品质</h3>
              <p class="advantage-desc">改善促进：改善睡眠，优化情绪，促进肌肤弹性，<br> 支持心血管健康，保护肝脏功能。</p>
            </div>
            <div class="advantage-item"  :style="{'transition-delay': '0.5s'}">
              <div class="advantage-icon">
                <svg t="1749354693526" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14526" width="200" height="200"><path d="M512 64a32 32 0 0 1 32 32v33.28a384.064 384.064 0 0 1 350.72 350.72h33.28a32 32 0 1 1 0 64h-33.28a384.064 384.064 0 0 1-350.72 350.72v33.28a32 32 0 1 1-64 0v-33.28A384.064 384.064 0 0 1 129.28 544H96a32 32 0 0 1 0-64h33.28A384.064 384.064 0 0 1 480 129.28V96A32 32 0 0 1 512 64z m32 129.6V288a32 32 0 0 1-64 0V193.6A320.128 320.128 0 0 0 193.536 480H288a32 32 0 0 1 0 64H193.6a320.128 320.128 0 0 0 286.336 286.4L480 736a32 32 0 1 1 64 0v94.4a320.128 320.128 0 0 0 286.4-286.336L736 544a32 32 0 1 1 0-64h94.4A320.128 320.128 0 0 0 544 193.6zM512 448a64 64 0 1 1 0 128 64 64 0 0 1 0-128z" p-id="14527"></path></svg>
              </div>
              <h3 class="advantage-title">我们的定位</h3>
              <p class="advantage-desc">改善促进：改善睡眠，优化情绪，促进肌肤弹性，<br> 支持心血管健康，保护肝脏功能。</p>
            </div>
            <div class="advantage-item"  :style="{'transition-delay': '0.7s'}">
              <div class="advantage-icon">
                <svg t="1749355004314" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24998" width="200" height="200"><path d="M370.477467 614.730415l240.773161 148.827631a159.96091 159.96091 0 1 1-29.624761 57.585927l-245.763941-150.107318a191.953091 191.953091 0 1 1 3.903046-249.539018l371.10931-214.475588a159.96091 159.96091 0 1 1 30.520542 55.986318L371.757154 476.780127c7.742108 20.922887 12.02906 43.509367 12.02906 67.119598 0 24.953902-4.798827 48.884054-13.436716 70.766706zM863.796912 256.034072a95.976546 95.976546 0 1 0 0-191.953092 95.976546 95.976546 0 0 0 0 191.953092z m-127.968728 703.828002a95.976546 95.976546 0 1 0 0-191.953092 95.976546 95.976546 0 0 0 0 191.953092zM191.961091 671.932437a127.968728 127.968728 0 1 0 0-255.937456 127.968728 127.968728 0 0 0 0 255.937456z"  p-id="24999"></path></svg>
              </div>
              <h3 class="advantage-title">招商代理</h3>
              <p class="advantage-desc">地区代理+圈层渠道并行的核心策略，兼顾区域和渠道的重合性和差异性。区域拓展以北京、长三角（江浙沪皖）、大湾区和全国重点城市为主</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 品牌致敬部分 -->
    <section class="tribute-section">
      <img src="../assets/images/brand/p5.png" alt="品牌致敬" class="tribute-image">
      <div class="container">
        <h2 class="tribute-title" >TRIBUTE</h2>
        <div class="tribute-subtitle" v-fade-in="'bottom'">致敬人体非凡宇宙</div>
        <p class="tribute-desc" v-fade-in="'bottom'">
          生命蕴含着完美的标准答案，以敬畏之心参透自然、打破规则、解构进化，每一次革新都是一场驾驭科技的先锋实验，每一滴精粹都是人类科技与万年自然共同书写的永恒。
        </p>
      </div>
    </section>
  </div>
</template>

<script setup>
// 品牌页面逻辑
import { onMounted } from 'vue';

</script>

<style scoped lang="scss">
.brand-page {
  width: 100%;
}

/* 顶部气泡背景区域 */
.banner {
  position: relative;
  height: calc(100vh - 114px);
  color: #fff;
  overflow: hidden;
}

:deep(.ant-carousel) {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.banner-item1,
.banner-item2,
.banner-item3 {
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.banner-item1 {
  background-image: url('../assets/images/brand/banner.png');
}

.banner-item2 {
  background-image: url('../assets/images/brand/banner.png');
}

.banner-item3 {
  background-image: url('../assets/images/brand/banner.png');
}

.banner-text {
  width: 70vw;
  background-color: rgba(0, 0, 0,1);
  text-align: left;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
    display: flex;
    .banner-container {
      flex: 1;
      display: flex;
      padding: 2rem;
      .logo {
        width: 6rem;
        height: 6rem;
      }
  }
  .banner-number {
    font-size: .4rem;
    padding-right: 4rem;
    padding-left: 1rem;
  }

  .banner-button {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: auto;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 0;
    aspect-ratio: 1/2;

    .banner-button-item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50%;
      cursor: pointer;

      &:hover {
        background-color: #1a1a1a;
      }
      img {
        width: 1rem;
      }
    }
  }

  .text-container {
    flex: 1;
  }
}


.section-title {
  font-size: 1rem;
  margin-bottom: .0;
  font-weight: 700;
}

.section-desc {
  font-size: .6rem;
  margin-bottom: .0;
}

.more-btn {
  margin-top: .5rem;
  
  a {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    padding-bottom: 2px;
    transition: all 0.3s ease;
    
    &:hover {
      opacity: 0.8;
    }
  }
}

/* 关于我们部分 */
.about-section {
  width: 1600px;
  max-width: 100%;
  margin: 140px auto;
  padding: 0;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}

.about-background {
  background-image: none;
  background-color: #fff;
  min-height: 600px;
  position: relative;
  display: flex;
  align-items: center;
}

.about-background:after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background-image: url('../assets/images/brand/p1.png');
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.about-background:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background: #fff;
  z-index: 0;
}

.container {
  margin: 0 auto;
  padding: 0 15px;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1600px;

  
}

.about-content {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.about-text {
  flex: 1;
  max-width: 66%;
  padding: 80px 0px 80px 0;
  opacity: 0;
  transform: translateX(-30px);
  transition: all 1s ease-out;
  position: relative;
  z-index: 2;
  
  &.animate {
    opacity: 1;
    transform: translateX(0);
  }
}

.about-title {
  font-size: 2.8rem;
  margin-bottom: 5px;
  font-weight: 600;
  color: #000;
}

.about-subtitle {
  font-size: 1.2rem;
  margin-bottom: 30px;
  color: #d4b572;
  font-weight: 300;
  font-style: italic;
}

.about-desc {
  margin-bottom: 40px;
  line-height: 1.8;
  color: #666;
  font-size: 1rem;
  padding-right: 20%;
}

.about-stats {
  margin-bottom: 40px;
  display: flex;
  flex-wrap: nowrap;
  position: relative;
}

.stat-item {
  margin-right: 10px;
  margin-bottom: 20px;
  width: calc(25% - 8px);
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #fff;
  min-height: 110px;
  box-shadow: 0 0 15px rgba(0,0,0,0.05);
  
  
  h3 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: #333;
    font-weight: 400;
  }
  
  span {
    font-size: 1.5rem;
    color: #d4b572;
    font-weight: 300;
  }
}

.number {
  text-align: left;
  align-items: flex-start;
  padding-left: 40px;
  span {
    font-family: sans-serif;
  }
}

button.more-btn {
  background-color: #d4b572;
  color: #fff;
  border: none;
  padding: 12px 50px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 2rem;
  margin-top: 10px;
}

.about-image {
  flex: 1.2;
  opacity: 0;
  transform: translateX(30px);
  transition: all 1s ease-out;
  
  &.animate {
    opacity: 1;
    transform: translateX(0);
  }
  
  img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* 精选系列部分 */
.eclat-section {
  padding: 140px 0;
  background-color: #000;
  color: #fff;
  background-image: url('../assets/images/brand/p2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
  }
}

.eclat-title {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 100px;
  position: relative;
  z-index: 1;
}

.eclat-items {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  position: relative;
  z-index: 1;
}

.eclat-item {
  flex: 1;
  text-align: center;
  padding: 0px 30px;
  
  &.animate {
    opacity: 1;
    transform: translateY(0);
  }
  
  &:nth-child(1) {
    transition-delay: 0.1s;
  }
  
  &:nth-child(2) {
    transition-delay: 0.3s;
  }
  
  &:nth-child(3) {
    transition-delay: 0.5s;
  }
  
  h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #fff;
  }
  
  p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #fff;
  }
}

.eclat-border {
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}

/* 品牌故事部分 */
.story-section {
  padding: 120px 0;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}

.story-content {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

.story-left {
  flex: 1;
  position: relative;
}

.story-title {
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 50px;
  display: block;
  width: 100%;
  font-weight: 700;
  padding-left: 80px;
  position: relative;

  .story-title-span {
    position: absolute;
    top: 0;
    left: 60%;
    font-size: .8rem;
  }

  &::after {
    content: '';
    height: 2px;
    width: 70%;
    background-color: #808080;
    display: inline-block;
    position: absolute;
    bottom: -20px;
    left: 80px;
  }
}

.story-globe {
  width: 700px;
  height: 700px;
  background-image: url('../assets/images/brand/p3.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 50px auto;
  position: relative;
}

.story-subtitle {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  right: 10%;
  span {
    font-size: 2rem;
    color: #C59359;
    &:first-of-type {
      font-weight: 700;
      margin-right: 10px;
    }
  }
}

.story-right {
  flex: 1;
  height: 800px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .story-text-title {
    font-weight: 700;
    color: #272727;
    margin-bottom: 20px;
  }
}

.story-text {
  margin-bottom: 20px;
  line-height: 1.8;
  color: #666;

  &.story-text-last {
    position: relative;
    &::after {
      content: '';
      display: block;
      width: 5%;
      height: 2px;
      position: absolute;
      bottom: -30px;
      right: 5px;
      background-color: #808080;
    }
  }
}

/* 服务优势部分 */
.advantages-section {
  padding: 80px 0;
  background-color: #F5F5F5;
  position: relative;
}

.advantages-content {
  display: flex;
  align-items: stretch;
}

.advantages-image {
  flex: 1;
  opacity: 0;
  transform: translateX(-30px);
  transition: all 1s ease-out;
  
  &.animate {
    opacity: 1;
    transform: translateX(0);
  }
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

.advantages-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0;
  position: relative;
  padding: 10%;
}

.advantage-item {
  display: flex;
  flex-direction: column;
  align-items: left;
  text-align: left;
  
  &.animate {
    opacity: 1;
    transform: translateY(0);
  }
  
  &:hover {
    
    .advantage-icon {
      transform: scale(1.5);
    }
  }

  &:nth-child(1), &:nth-child(3) {
    border-right: 1px solid #565656;
    padding: 0 10% 10% 0;
  }

  &:nth-child(2), &:nth-child(4) {
    padding:  0 0 10% 10%;
  }

  &:nth-child(3), &:nth-child(4) {
    padding-top: 10%;
  }
  &:nth-child(1), &:nth-child(2) {
    border-bottom: 1px solid #565656;
  }
}

.advantage-icon {
  width: 40px;
  font-size: .8rem;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  
  .icon {
    width: 40px;
    height: 40px;
    color: #333;
  }
}

.advantage-title {
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: #333;
  font-weight: 600;
}

.advantage-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #777;
  max-width: 300px;
  margin: 0 auto;
}

/* 品牌致敬部分 */
.tribute-section {
  padding: 220px 0 220px 0;
  background-color: #fff;
  text-align: center;
  position: relative;
  .tribute-image {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    animation: rotateImg 40s linear infinite;
  }
}

@keyframes rotateImg {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(360deg); }
}

.tribute-title {
  font-size: 2.5rem;
  margin-bottom: 40px;
  font-weight: 700;
  color: #000;
}

.tribute-subtitle {
  font-size: 1rem;
  color: #272727;
  margin-bottom: 12px;
  font-weight: 600;
  display: inline-block;
  position: relative;

  &::after {
    content: '';
    display: block;
    width: 10%;
    height: 1px;
    background-color: #333;
    position: absolute;
    bottom: 50%;
    right: -30%;
    transform: translateY(-50%);
  }

  &::before {
    content: '';
    display: block;
    width: 10%;
    height: 1px;
    background-color: #333;
    position: absolute;
    bottom: 50%;
    left: -30%;
    transform: translateY(-50%);
  }
}

.tribute-desc {
  max-width: 800px;
  margin: 0 auto;
  line-height: 2;
  color: #808080;
  font-size: 1.1rem;
}

</style>
